<template>
  <nav>
    <ul>
      <router-link v-for="item in navlist" :key="item.fname" :to="item.rout" tag="li" activeClass="itemcolor">
        {{item.fname}}
      </router-link>
    </ul>
  </nav>
</template>

<script>
export default {
  data () {
    return {
      flage: '',
      navlist: [
        { fname: '电影', rout: '/film' },
        { fname: '影视', rout: '/cinema' },
        { fname: '我的', rout: '/center' }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
  .itemcolor{
      color: tomato;
  }
  nav {
    z-index: 99;
    position: fixed;
    left:0px;
    bottom: 0px;
    width: 100%;
    height: 50px;
    background-color: rgb(246, 247, 248);
    ul {
      display: flex;
      li {
        flex: 1;
        line-height: 50px;
        text-align: center;
        }
    }
  }
</style>
